<template>
    <v-layout align-center justify-center>
        <v-flex xs12 sm8 md4>
          <v-card class="elevation-12">
            <v-toolbar dark color="primary">
              <v-toolbar-title>登录</v-toolbar-title>
              <v-spacer></v-spacer>
              <router-link to="/">
                <v-btn icon dark>
                  <v-icon>close</v-icon>
                </v-btn>
              </router-link>
            </v-toolbar>
            <v-card-text>
              <v-form>
                <v-text-field
                  prepend-icon="person"
                  name="name"
                  label="账号"
                  type="text"
                  v-model="name"
                  :counter="20"
                  :error-messages="errors.collect('name')"
                  v-validate="'required|max:20'"
                  data-vv-name="name"
                  required>
                </v-text-field>
                <v-text-field
                  prepend-icon="lock"
                  name="password"
                  label="密码"
                  id="password"
                  type="password"
                  v-model="password"
                  :error-messages="errors.collect('password')"
                  v-validate="'required|min:6'"
                  :error="error"
                  data-vv-name="password"
                  required>
                </v-text-field>
                <span class="red--text ml-5" v-if="mismatchError">{{bag.first('password:auth')}}</span>
              </v-form>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="green" @click="login" @keyup.enter="login">Login</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
    </v-layout>
</template>

<script>
import { ErrorBag } from 'vee-validate'

export default {
  data () {
    return {
      name: '',
      password: '',
      dictionary: {
        attributes: {
          name: '账号',
          password: '密码'
          // custom attributes
        },
        custom: {
          name: {
            required: () => '账号不能为空',
            max: '账号最多只能20位'
            // custom messages
          }
        }
      },
      bag: new ErrorBag(),
      error: false
    }
  },
  computed: {
    mismatchError () {
      return this.bag.has('password:auth') && !this.errors.has('password')
    }
  },

  mounted () {
    this.$validator.localize('zh_CN', this.dictionary)
  },

  methods: {
    login () {
      this.$validator.validate().then(result => {
        if (result) {
          let formData = {
            name: this.name,
            password: this.password
          }
          this.$store.dispatch('loginRequest', formData).then(response => {
            this.$router.push({name: 'home'})
          }).catch(error => {
            if (error.response.status === 421) {
              this.bag.add('password', '账号和密码不相符', 'auth')
              this.error = true
              // console.log(this.bag)
              // this.$store.dispatch('showNotification', { 'level': 'error', 'msg': '邮箱和密码不相符', 'alert': true })
            }
          })
        }
      })
    }
  }
}

</script>
